<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>房产：{{ fang }}</h4>
		<button @click="editChild1">修改child1的数据</button>
		<button @click="editChild2()">修改child2的数据</button>
		<button @click="getChilds($refs)">获取所有的子组件</button>
		<Child1 ref="ref1" />
		<Child2 ref="ref2" />
	</div>
</template>
<!-- 安装 vue 路由模块  npm install vue-router -->

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script setup lang="ts" name="Father">
import { ref } from 'vue';
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

const ref1 = ref()
const fang = ref(3)
const ref2 = ref()


// 注意点：当访问obj.c的时候，底层会自动读取value属性，因为c是在obj这个响应式对象中的
/* let obj = reactive({
	a:1,
	b:2,
	c:ref(3)
})
let x = ref(4)

console.log(obj.a)
console.log(obj.b)
console.log(obj.c)
console.log(x) */

//修改数据 父传子
function editChild1() {
	console.log(ref1.value.lev)
	ref1.value.lev = "xxx"
}

//修改数据 父传子
function editChild2() {
	console.log(ref2.value.lev)
	ref2.value.wanju = "玩偶"
}

//获取所有的子组件 $refs  父传子
function getChilds(env: any) {
	// console.log(env)
	for (let it in env) {
		// console.log(it)
		// console.log(env[it])
		env[it].book += 10
	}
}

//把数据交给外部
defineExpose({ fang })

</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}

.father button {
	margin-bottom: 10px;
	margin-left: 10px;
}
</style>
